<template>
    <example :template-code="templateString">
        <template #describe>
            <t :id="`${$t('查询模块的表单项插槽')}`">{{ $t('查询模块的表单项插槽') }}</t>
            <li>
                虽然<span class="s-code">【Form 表单】</span>内置了很多种类型的查询框，但仍然提供插槽功能以应对更特殊的查询需求
            </li>
            <li>
                插槽开启的方式也很简单，在给<span class="d-code">search-config</span>的
                <span class="s-code">fields</span>配置表单项时，将某个表单项的
                <span class="s-code">type</span>设置为
                <span class="s-code">"slot"</span>即可。
                开启的插槽，其名称为该表单项对应的
                <span class="s-code">code</span>，参数为:<span class="s-code">{ field, index, form }</span>
            </li>
        </template>
        <sib-table :search-config="searchConfig" :table-column="tableColumn" :table-data="tableData">
            <!-- 插槽名称为：'form-slot-' 加上表单项的code -->
            <template #form-slot-time="{ field, form }">
                <el-date-picker v-model="form[field.code]" type="date" placeholder="请输入"></el-date-picker>
            </template>
            <template #more-operate="{ form }">
                <el-button type="warning" @click="handleOperate(form)">更多操作</el-button>
            </template>
        </sib-table>
    </example>
</template>

<script>
import { ref } from 'vue';

export default {
    setup() {
        const tableData = ref(Array(8).fill().map((_, i) => ({
            id: i + 1,
            name: `张三${i + 1}号`,
            sex: i % 2 ? '男' : '女',
            status: '未婚',
            age: i + 20,
        })));

        return {
            tableColumn: [
                { label: '姓名', code: 'name' },
                { label: '性别', code: 'sex' },
                { label: '年龄', code: 'age' },
                { label: '身高', code: 'height' },
                { label: '状态', code: 'status' },
            ],
            searchConfig: {
                fields: [
                    {
                        label: '姓名',
                        code: 'name',
                        type: 'text',
                        maxlength: 30,
                    },
                    {
                        label: '表单项插槽',
                        code: 'time',
                        // 开启插槽，插槽名称为：'form-slot-' 加上表单项的code；即为 'form-slot-time'
                        type: 'slot',
                    },
                    {
                        label: '性别',
                        code: 'sex',
                        type: 'select',
                        options: [
                            { value: '女', label: '女' },
                            { value: '男', label: '男' },
                        ],
                    },
                ],
            },
            tableData,
            handleOperate(form) {
                // eslint-disable-next-line
                console.log('form: ', form);
            },
            templateString: `<template>
    <div class="example-box">
        <sib-table :search-config="searchConfig" :table-column="tableColumn" :table-data="tableData">
            <!-- 插槽名称为：'form-slot-' 加上表单项的code -->
            <template #form-slot-time="{ field, form, index }">
                <el-date-picker v-model="form[field.code]" type="date" placeholder="请输入"></el-date-picker>
            </template>
            <template #more-operate="{ form }">
                <el-button type="warning" @click="handleOperate(form)">更多操作</el-button>
            </template>
        </sib-table>
    </div>
</template>

<script>
export default {
    setup() {
        const tableData = ref(Array(8).fill().map((_, i) => ({
            id: i + 1,
            name: \`张三\${i + 1}号\`,
            sex: i % 2 ? '男' : '女',
            deposit: 10086 + i * 6666,
            status: '未婚',
            age: i + 20,
        })));

        return {
            tableColumn: [
                { label: '姓名', code: 'name' },
                { label: '性别', code: 'sex' },
                { label: '年龄', code: 'age' },
                { label: '身高', code: 'height' },
                { label: '状态', code: 'status' },
            ],
            searchConfig: {
                fields: [
                    {
                        label: '姓名',
                        code: 'name',
                        type: 'text',
                        maxlength: 30,
                    },
                    {
                        label: '表单项插槽',
                        code: 'time',
                        // 开启插槽，插槽名称为：'form-slot-' 加上表单项的code；即为 'form-slot-time'
                        type: 'slot',
                    },
                    {
                        label: '性别',
                        code: 'sex',
                        type: 'select',
                        options: [
                            { value: '女', label: '女' },
                            { value: '男', label: '男' },
                        ],
                    },
                ],
            },
            tableData,
            handleOperate(form) {
                console.log('form: ', form);
            },
        };
    },
};
<\/script>`,
        };
    },
};
</script>
